<template>
    <div>
        <x-form ref="xForm" v-model="formData" :config="formConfig">
            <template #executionListener>
                <el-badge :value="executionListenerLength">
                    <el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
                </el-badge>
            </template>
            <template #taskListener>
                <el-badge :value="taskListenerLength">
                    <el-button size="small" @click="dialogName = 'taskListenerDialog'">编辑</el-button>
                </el-badge>
            </template>
            <template #multiInstance>
                <el-badge :is-dot="hasMultiInstance">
                    <el-button size="small" @click="dialogName = 'multiInstanceDialog'">编辑</el-button>
                </el-badge>
            </template>
        </x-form>
        <executionListenerDialog
                v-if="dialogName === 'executionListenerDialog'"
                :element="element"
                :modeler="modeler"
                @close="finishExecutionListener"
        />
        <taskListenerDialog
                v-if="dialogName === 'taskListenerDialog'"
                :element="element"
                :modeler="modeler"
                @close="finishTaskListener"
        />
        <multiInstanceDialog
                v-if="dialogName === 'multiInstanceDialog'"
                :element="element"
                :modeler="modeler"
                @close="finishMultiInstance"
        />
    </div>
</template>

<script>
    import mixinPanel from '../../common/mixinPanel'
    import executionListenerDialog from './property/executionListener'
    import taskListenerDialog from './property/taskListener'
    import multiInstanceDialog from './property/multiInstance'

    export default {
        components: {
            executionListenerDialog,
            taskListenerDialog,
            multiInstanceDialog
        },
        mixins: [mixinPanel],
        props: {
            taskCategory: {
                type: Array,
                required: true
            }
        },
        data() {
            return {
                dialogName: '',
                executionListenerLength: 0,
                taskListenerLength: 0,
                hasMultiInstance: false,
                formData: {}
            }
        },
        computed: {
            formConfig() {
                const _this = this
                return {
                    inline: false,
                    item: [
                        {
                            xType: 'input',
                            name: 'id',
                            label: '节点id',
                            rules: [
                                {required: true, message: '节点id不能为空'},
                                {pattern: /^[a-z_][\w-.]*$/i, message: '节点id格式不正确'}
                            ]
                        },
                        {
                            xType: 'input',
                            name: 'name',
                            label: '节点名称'
                        },
                        {
                            xType: 'select',
                            name: 'taskCategory',
                            label: '任务分类',
                            dic: {data: _this.taskCategory, label: 'name', value: 'id'},
                            show: !!_this.showConfig.taskCategory
                        },
                        {
                            xType: 'colorPicker',
                            name: 'color',
                            label: '节点颜色',
                            show: false
                        },
                        {
                            xType: 'slot',
                            name: 'executionListener',
                            label: '执行监听器'
                        },
                        {
                            xType: 'slot',
                            name: 'taskListener',
                            label: '任务监听器',
                            show: !!_this.showConfig.taskListener
                        },
                        {
                            xType: 'select',
                            name: 'assignee',
                            label: '指定人员',
                            allowCreate: true,
                            filterable: true,
                            dic: {data: _this.users, label: 'name', value: 'id'},
                            show: !!_this.showConfig.assignee
                        },
                        {
                            xType: 'select',
                            name: 'candidateUsers',
                            label: '候选人员',
                            multiple: true,
                            allowCreate: true,
                            filterable: true,
                            dic: {data: _this.users, label: 'name', value: 'id'},
                            show: !!_this.showConfig.candidateUsers
                        },
                        {
                            xType: 'select',
                            name: 'candidateGroups',
                            label: '候选组',
                            multiple: true,
                            allowCreate: true,
                            filterable: true,
                            dic: {data: _this.groups, label: 'name', value: 'id'},
                            show: !!_this.showConfig.candidateGroups
                        },
                        {
                            xType: 'slot',
                            name: 'multiInstance',
                            label: '多实例'
                        },
                        {
                            xType: 'switch',
                            name: 'async',
                            label: '异步',
                            activeText: '是',
                            inactiveText: '否',
                            show: !!_this.showConfig.async
                        },
                        {
                            xType: 'input',
                            name: 'priority',
                            label: '优先级',
                            show: !!_this.showConfig.priority
                        },
                        {
                            xType: 'input',
                            name: 'formKey',
                            label: '表单标识key',
                            show: !!_this.showConfig.formKey
                        },
                        {
                            xType: 'input',
                            name: 'skipExpression',
                            label: '跳过表达式',
                            show: !!_this.showConfig.skipExpression
                        },
                        {
                            xType: 'switch',
                            name: 'isForCompensation',
                            label: '是否为补偿',
                            activeText: '是',
                            inactiveText: '否',
                            show: !!_this.showConfig.isForCompensation
                        },
                        {
                            xType: 'switch',
                            name: 'triggerable',
                            label: '服务任务可触发',
                            activeText: '是',
                            inactiveText: '否',
                            show: !!_this.showConfig.triggerable
                        },
                        {
                            xType: 'switch',
                            name: 'autoStoreVariables',
                            label: '自动存储变量',
                            activeText: '是',
                            inactiveText: '否',
                            show: !!_this.showConfig.autoStoreVariables
                        },
                        {
                            xType: 'input',
                            name: 'ruleVariablesInput',
                            label: '输入变量',
                            show: !!_this.showConfig.ruleVariablesInput
                        },
                        {
                            xType: 'input',
                            name: 'rules',
                            label: '规则',
                            show: !!_this.showConfig.rules
                        },
                        {
                            xType: 'input',
                            name: 'resultVariable',
                            label: '结果变量',
                            show: !!_this.showConfig.resultVariable
                        },
                        {
                            xType: 'switch',
                            name: 'exclude',
                            label: '排除',
                            activeText: '是',
                            inactiveText: '否',
                            show: !!_this.showConfig.exclude
                        },
                        {
                            xType: 'input',
                            name: 'class',
                            label: '类',
                            show: !!_this.showConfig.class
                        },
                        {
                            xType: 'datePicker',
                            type: 'datetime',
                            name: 'dueDate',
                            label: '到期时间',
                            show: !!_this.showConfig.dueDate
                        }
                    ]
                }
            }
        },
        watch: {
            'formData.assignee': function (val) {
                if (val === '') val = null
                this.updateProperties({'flowable:assignee': val})
            },
            'formData.candidateUsers': function (val) {
                if (val === '' || val?.length == 0) val = null
                this.updateProperties({'flowable:candidateUsers': val?.join(',')})
            },
            'formData.candidateGroups': function (val) {
                if (val === '' || val?.length == 0) val = null
                this.updateProperties({'flowable:candidateGroups': val?.join(',')})
            },
            'formData.async': function (val) {
                if (val === '') val = null
                this.updateProperties({'flowable:async': true})
            },
            'formData.dueDate': function (val) {
                if (val === '') val = null
                this.updateProperties({'flowable:dueDate': val})
            },
            'formData.formKey': function (val) {
                if (val === '') val = null
                this.updateProperties({'flowable:formKey': val})
            },
            'formData.priority': function (val) {
                if (val === '') val = null
                this.updateProperties({'flowable:priority': val})
            },
            'formData.skipExpression': function (val) {
                if (val === '') val = null
                this.updateProperties({'flowable:skipExpression': val})
            },
            'formData.isForCompensation': function (val) {
                if (val === '') val = null
                this.updateProperties({'isForCompensation': val})
            },
            'formData.triggerable': function (val) {
                if (val === '') val = null
                this.updateProperties({'flowable:triggerable': val})
            },
            'formData.class': function (val) {
                if (val === '') val = null
                this.updateProperties({'flowable:class': val})
            },
            'formData.autoStoreVariables': function (val) {
                if (val === '') val = null
                this.updateProperties({'flowable:autoStoreVariables': val})
            },
            'formData.exclude': function (val) {
                if (val === '') val = null
                this.updateProperties({'flowable:exclude': val})
            },
            'formData.ruleVariablesInput': function (val) {
                if (val === '') val = null
                this.updateProperties({'flowable:ruleVariablesInput': val})
            },
            'formData.rules': function (val) {
                if (val === '') val = null
                this.updateProperties({'flowable:rules': val})
            },
            'formData.resultVariable': function (val) {
                if (val === '') val = null
                this.updateProperties({'flowable:resultVariable': val})
            }
        },
        created() {
            const cache = {
                ...this.element.businessObject,
                ...this.element.businessObject.$attrs
            }
            // 移除flowable前缀，格式化数组
            for (const key in cache) {
                if (key.indexOf('flowable:') === 0) {
                    const newKey = key.replace('flowable:', '')
                    cache[newKey] = cache[key]
                    delete cache[key]
                }
            }
            for (const key in cache) {
                if (key === 'candidateUsers') {
                    cache[key] = cache[key] && cache[key]?.split(',') || []
                } else if (key === 'candidateGroups') {
                    cache[key] = cache[key] && cache[key]?.split(',') || []
                } else if (key === 'assignee') {
                }
            }
            this.formData = cache
            this.computedExecutionListenerLength()
            this.computedTaskListenerLength()
            this.computedHasMultiInstance()
        },
        methods: {
            computedExecutionListenerLength() {
                this.executionListenerLength = this.element.businessObject.extensionElements?.values
                ?.filter(item => item.$type === 'flowable:ExecutionListener').length ?? 0
            },
            computedTaskListenerLength() {
                this.taskListenerLength = this.element.businessObject.extensionElements?.values
                ?.filter(item => item.$type === 'flowable:TaskListener').length ?? 0
            },
            computedHasMultiInstance() {
                if (this.element.businessObject.loopCharacteristics) {
                    this.hasMultiInstance = true
                } else {
                    this.hasMultiInstance = false
                }
            },
            finishExecutionListener() {
                if (this.dialogName === 'executionListenerDialog') {
                    this.computedExecutionListenerLength()
                }
                this.dialogName = ''
            },
            finishTaskListener() {
                if (this.dialogName === 'taskListenerDialog') {
                    this.computedTaskListenerLength()
                }
                this.dialogName = ''
            },
            finishMultiInstance() {
                if (this.dialogName === 'multiInstanceDialog') {
                    this.computedHasMultiInstance()
                }
                this.dialogName = ''
            }
        }
    }
</script>

<style></style>
